<template>
  <div class="app-upload-img">
    <el-input readonly :value="result[options.key]">
      <template slot="prepend">
        <img v-if="result[options.key]" :src="result[options.key]" class="avatar">
        <i v-else class="el-icon-picture"></i>
      </template>
      <template slot="append">
        <el-upload :action="options.action" v-bind="$props" list-type=""
                   :on-progress="progress"
                   :on-success="success"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </template>
    </el-input>
    <el-progress
      v-if="file.status === 'uploading'"
      :stroke-width="width"
      :show-text="false"
      :percentage="file.percentage">
    </el-progress>
  </div>
</template>
<style>
  .app-upload-img .el-upload-list {
    display: none;
  }
</style>

<script>
  export default{
    name: 'AppImg',
    componentName: 'AppImg',
    props: ['result', 'options'],
    data () {
      return {imageUrl: this.result[this.options.key], file: {}, width: 2}
    },
    methods: {
      progress (event, file, fileList) {
        this.file = file
      },
      success (response, file, fileList) {
        /** TODO 根据上传的upload的response拼接地址 **/
        this.imageUrl = file.name
        this.$emit('input', this.imageUrl)
        console.log('success', arguments)
      }
    },
    mounted () {
      console.log(this.result, this.options)
    }
  }
</script>
